<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发布文章</title>
    <link href="../static_pc/assets3/css/bs3/dpl-min.css" rel="stylesheet" type="text/css"/>
    <link href="../static_pc/assets3/css/bs3/bui-min.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" charset="utf-8" src="../ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="../ueditor/ueditor.all.min.js"></script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="../ueditor/lang/zh-cn/zh-cn.js"></script>

    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>

<div class="demo-content" id="app" v-cloak>
    <div class="control-group">
        <label class="control-label">&nbsp;</label>

        <div class="controls">
            &nbsp;
        </div>
    </div>
    <form id="J_Form" class="form-horizontal">
        <div class="control-group">
            <label class="control-label"><s>*</s>标题：</label>

            <div class="controls">
                <input name="title" type="text" class="input-large" data-rules="{required : true}">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label"><s>*</s>所属类别：</label>

            <div class="controls">
                <select name="typeId" data-rules="{required : true}">
                    <option v-for="item in types" :value="item.id">{{item.typeName}}</option>
                </select>
            </div>
            <!--<div class="controls bui-form-field-select" data-loader="{url:'../articleAdmin/listTypes',property:'items',dataType:'json'}">-->
            <!--<input name="typeId" type="hidden" data-rules="{required : true}">-->
            <!--</div>-->
        </div>
        <div class="control-group">
            <label class="control-label">关键字：(多个关键字中间用空格隔开)</label>

            <div class="controls  control-row-auto">
                <textarea name="keyWord" class="control-row4 input-large"></textarea>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label"><s>*</s>文章内容：</label>

            <div class="controls  control-row-auto">
                <script id="editor" type="text/plain" style="width:80%;height:300px;"></script>
            </div>
        </div>
        <div class="row actions-bar">
            <div class="form-actions span13 offset5">
                <button type="button" class="button button-primary">保存</button>
                &nbsp;&nbsp;
                <button type="reset" class="button">重置</button>
            </div>
        </div>
    </form>
</div>
</body>
<script type="text/javascript" src="../static_pc/common/jquery.min-2.1.3.js"></script>
<script type="text/javascript" src="../static_pc/layer/layer.js"></script>
<script type="text/javascript" src="../static_pc/common/JsUtil.js"></script>
<script type="text/javascript" src="../static_pc/assets/js/bui-min.js"></script>
<script type="text/javascript" src="../static_pc/assets/js/config-min.js"></script>
<script type="text/javascript" src="../static_pc/vue2/vue.min.js"></script>
<script type="text/javascript">
    layer.load();
    var vm = null;
    $(document).ready(function () {
        //实例化编辑器
        //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
        var ue = UE.getEditor('editor');
        $.post("../articleAdmin/listTypes", {"a": 1}, function () {
        }, "json").success(function (data) {
            if (!data.hasError) {
                vm = new Vue({
                    el: "#app",
                    data: {
                        types: data.object,
                    },
                });
                vm.$nextTick(function () {
                    init(ue);
                    layer.closeAll('loading');
                });
            }
        }).error(function (XMLHttpRequest, textStatus, errorThrown) {
            layer.closeAll('loading');
            BUI.Message.Alert("系统繁忙，请稍后" + XMLHttpRequest.status + "," + XMLHttpRequest.readyState + "," + textStatus, 'warning');
        });
    });

    function init(ue) {
        $(".button-primary").click(function () {
            var title = $("[name='title']").val();
            if (__JsUtil.isNullOrEmpty(title)) {
                BUI.Message.Alert("请输入标题", function () {
                });
                return false;
            }
            var typeId = $("[name='typeId']").val();
            if (__JsUtil.isNullOrEmpty(typeId)) {
                BUI.Message.Alert("请选择文章类别", function () {
                });
                return false;
            }
            var content = ue.getContent();
            if (__JsUtil.isNullOrEmpty(content)) {
                BUI.Message.Alert("请输入文章内容", function () {
                });
                return false;
            }
            layer.load();
            $.post("../articleAdmin/saveArticle", {
                "title": title,
                "typeId": typeId,
                "keyWord": $("[name='keyWord']").val(),
                "summary":ue.getContentTxt().substr(0,155),
                "content": content
            }, function () {
            }, "json").success(function (data) {
                layer.closeAll('loading');
                if (!data.hasError) {
                    BUI.Message.Alert(data.error);
                } else {
                    BUI.Message.Alert(data.error);
                }
            }).error(function (XMLHttpRequest, textStatus, errorThrown) {
                layer.closeAll('loading');
                BUI.Message.Alert("系统繁忙，请稍后" + XMLHttpRequest.status + "," + XMLHttpRequest.readyState + "," + textStatus, 'warning');
            });
        });
    }
</script>
</html>